<template>

    <!-- 企业证书 -->
    <div v-show="enterpriseEdit">
      <!-- 企业证书上半部分 -->
      <div class="div-Bt">
        <!-- 1 -->
      <div class="enterpriseState" ref="leibie">
          <div class="kind"><div class="biaoshi"></div>证书种类</div>
          <div class="enterpriseState-es" ref="myenterpriseState">
          <div class="state-a" @click="clickQualiCertiCount">
            <div class="state-as" ref="myStatep"></div>
            <div class="sta-zi"><span class="kongxian">资质证书 {{this.qualiCertiCount}}</span></div>
          </div>

          <div class="state-a" @click="clickIsoCertiCount">
            <div class="state-bs" ref="myStatei"></div>
            <div class="sta-zi"><span class="kongxian">ISO证书 {{this.isoCertiCount}}</span></div>
            </div>
          <div class="state-a" @click="clickHonorCertiCount">
            <div class="state-cs" ref="myStateo"></div>
            <div class="sta-zi"><span class="kongxian">荣誉证书 {{this.honorCertiCount}}</span></div>
            </div>
          <div class="state-a" @click="clickOtherCertiCount">
            <div class="state-ds" ref="myStaten"></div>
            <div class="sta-zi"><span class="kongxian">其他证书 {{this.otherCertiCount}}</span></div>
            </div>
          </div>
      </div>
      <!-- 2 -->
      <div class="warning" ref="myWarning">
         <!-- 到期预警 -->
        <div @click="clickWaringG()" :class='{"waring-a":waringG ==1,"waring-b":waringG ==2,"waring-d":waringG ==4,"waring-e":waringG ==5}'
        >
         <div class="waring-is">
           <h2>{{this.qualiWarning}}</h2>
         </div>
         <span>资质证书</span>
       </div>
        <div @click="clickWaringH()" :class='{"waring-a":waringH ==1,"waring-b":waringH ==2,"waring-d":waringH ==4,"waring-e":waringH ==5}'>
       <div class="waring-is">
           <h2>{{this.isoWarning}}</h2>
       </div>
         <span>ISO证书</span>
       </div>
       </div>
       <!-- 3 -->
        <div class="certificateHonorType">
         <div v-show="EditHonor">
           <div class="kind" ref="zhonglei"><div class="biaoshi"></div> 荣誉证书</div>
           <div class="certificateHonorType-es" ref="mycertificateHonorTypets"></div>
         </div>
         <div class="xiazuan-div" v-show="!EditHonor">
          <!-- <div class="kind-wtf" ref="zhongleizhengshu">123</div> -->
           <div class="kind-zhong" ref="zhonglei"><div class="biaoshi"></div>荣誉证书统计</div><el-button class="return-es" type="text" @click="clickTs()">返回上级</el-button>
         <div class="certificateHonorType-es">
          <el-table
            :data="yearList"
            style="width: 100%"
            :max-height="tableHeightCode"
            :header-cell-style="{background:'transparent',color:'#3EBDFF'}"
            >
            <el-table-column
              prop="date"
              type="index"
              label="序列"
              align="center"
              width="50">
            </el-table-column>
            <el-table-column
            :show-overflow-tooltip="true"
              prop="level"
              align="center"
              width="90"
              label="证书等级">
              <template slot-scope="scope">
         <span v-if="scope.row.level == 1">
           国家级
          </span>
          <span v-if="scope.row.level == 2">
           省级
          </span>
          <span v-if="scope.row.level == 3">
           市级
          </span>
          <span v-if="scope.row.level == 4">
           其他
          </span>
        </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="证书名称"
              align="center"
              min-width="80">
            </el-table-column>
          </el-table>
         </div>
         </div>
        </div>
      </div>
      <!-- 企业证书下半部分 -->
      <div class="demo-buttom">
        <div class="cost" ref="costss">
        <div v-show="EditLevel">
           <div class="kind"><div class="biaoshi"></div> 资质项统计</div>
           <div class="cost-es" ref="myCost"></div>
         </div>
         <div class="xiazuan-div" v-show="!EditLevel">
          <!-- <div class="kind-wtf" ref="zhongleizhengshu">123</div> -->
           <div class="kind-zhong" ref="zhonglei"><div class="biaoshi"></div>资质项统计</div><el-button class="return-es" type="text" @click="clickTsLecel()">返回上级</el-button>
         <div class="certificateHonorType-es">
          <el-table
            :data="levelList"
            style="width: 100%"
            :max-height="tableHeightCodese"
            :header-cell-style="{background:'transparent',color:'#3EBDFF'}"
            >
            <el-table-column
              prop="date"
              type="index"
              label="序列"
              align="center"
              width="50">
            </el-table-column>
            <el-table-column
            :show-overflow-tooltip="true"
              prop="name"
              align="center"
              label="资志项">
            </el-table-column>
          </el-table>
         </div>
         </div>
        </div>
        <div class="certificateWarning">
         <div>
           <div class="kind-e">
             <div class="kind-s" ref="myKinds">
             <div class="biaoshi"></div>证书预警
             </div>
            <div class="select-kind">
              <el-button @click="clickExpires()" size="small" :class='{"buttonKind-a":buttonKindA==1,"buttonKind-active":buttonKindA==2}' type="text">已逾期</el-button>
              <el-button @click="clickOnes()" size="small" :class='{"buttonKind-b":buttonKindB==1,"buttonKind-bctive":buttonKindB==2}' type="text">一月内</el-button>
              <el-button @click="clickThrees()" size="small" :class='{"buttonKind-c":buttonKindC==1,"buttonKind-cctive":buttonKindC==2}' type="text">三月内</el-button>
              <el-button @click="clickQuansss()" size="small" :class='{"buttonKind-q":buttonKindQ==1,"buttonKind-qctive":buttonKindQ==2}' type="text">全部</el-button>
            </div>
           </div>
           <div class="certificateWarning-tab">
            <el-table
            :data="dataEntQualiList"
            style="width: 100%"
            :max-height="tableHeight"
            :header-cell-style="{background:'transparent',color:'#3EBDFF'}"
            >
            <el-table-column
              prop="name"
              label="证书名称"
              min-width="100">
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="code"
              min-width="100"
              label="证书编号">
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="expireDate"
              min-width="100"
              label="到期日期">
            </el-table-column>
          </el-table>
           </div>
         </div>
        </div>
        <div class="statistics" ref="myrong">
        <div>
           <div class="kind"><div class="biaoshi"></div>荣誉证书类别</div>
           <div id="chartPieHoner" class="pie-wrap"></div>
         </div>
        </div>
        </div>
    </div>
  </div>
</template>

<script>
  // import Vue from 'vue'
  import echarts from 'echarts'
  import 'echarts/lib/component/title'
  require('echarts/theme/macarons');
  export default {
    name:"HomeEnterprise",
    data () {
    return {
        value: '1',
        chart: null,
        chartHonor:null,
        personnelEdit:true,
        enterpriseEdit:false,
        messageEdit:false,
        chartPie: null,
        EditHonor:true,
        // 过期
        expired:'',
        // 未过期
        notExpired:'',
        // 三个月内
        threeMonths:'',
        waringG: 1,
        waringH: 4,
        buttonKindA:1,
        buttonKindB:1,
        buttonKindC:1,
        buttonKindD:1,
        buttonKindE:1,
        buttonKindF:1,
        buttonKindG:1,
        buttonKindQ:2,
        headera:1,
        headerb:2,
        headerc:2,
        zong:'',
      honorCertiCount:'',
      isoCertiCount:'',
      otherCertiCount:'',
      qualiCertiCount:'',
      qualiCertiPercent:'',
      honorCertiPercent:'',
      isoCertiPercent:'',
      otherCertiPercent:'',
        PolicyList:[],
        tableData:[],
        levelList:[],
        tableisData:[],
        pageIndex:1,
        pageSize:100,
        radio:1,
        months:3,
        type:'',
        typeA:'',
        borrowInPay:'',
        borrowOutIncome:'',
        friendFee:'',
        selfFee:'',
        totalCount:'',
        yearList:[],
        dataEntQualiList:[],
        tableHeight:0,
        tableHeightCode:0,
        tableHeightCodese:0,
        activeName:'first',
        bidUsedCount:'',
        bidSuccessCount:'',
        OtherCount:'',
        borrowOutCountEdit:'',
        noUseCount:'',
        projectCount:'',
        bidUsedCounts:'',
        bidSuccessCounts:'',
        OtherCounts:'',
        borrowOutCounts:'',
        noUseCounts:'',
        projectCounts:'',
        validityType:0,
        chartLine: null,
        chartBar: null,
        chartPie: null,
        chartScatter: null,
        EditCost:true,
        EditLevel:true,
        loading: true,
        dataEmpty: true,
        a:'',
        b:'',
        c:'',
        d:'',
        l:'',
        v:'',
        validityType:2,
        days:'',
        code:'',
        lastTwoYearCount:'',
        // 2年前获取荣誉证书数量
        lastYearCount:'', 
        // 1年前获取荣誉证书数量
        thisYearCount:'',
        // 今年获取荣誉证书数量
        lastThreeYearCount:'',
        // 3年前获取荣誉证书数量
        special:'',
        //  特级数量
        first:'',
        //  壹级数量
        second:'',
        //  贰级数量
        third:'',
        //  叁级数量
        noClass:'',
        //  不分等级数量
        nationalLevel:'',
        // 国家级证书数量
        otherLevel:'',
        // 其他级别证书数量
        municipalLevel:'',
        // 市级证书数量
        provincialLevel:'',
        // 省级证书数量
        totalCounted:'',
        // ISO到期数量
        isoWarning:'',
        // 资质证书到期数量
        qualiWarning:'',
    }
    },
    computed: {
    },
    created () {
      // 企业证书
      this.getCountBycertiTypeCount()
      // 荣誉数量
      this.getDataHonorList()
      // 资志项数量
      this.getQualiLevelsCount()
      this.getlevelCount()
      this.getAllTypeWarningGet()
      this.clickWaringG()
    },
    watch: {
      // 资质开始
      qualiCertiPercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStatep()
            this.clickWaringG()
          }, 0)
        }
      },
      isoCertiPercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStatei()
          }, 0)
        }
      },
      honorCertiPercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStateo()
          }, 0)
        }
      },
      otherCertiPercent:{
        handler(val) {
          window.setTimeout(() => {
            this.myStaten()
          }, 0)
        }
      },
      lastThreeYearCount:{
         handler(val) {
          window.setTimeout(() => {
            this.mycertificateHonorType()
          }, 0)
        }
      },
      lastTwoYearCount:{
         handler(val) {
          window.setTimeout(() => {
            this.mycertificateHonorType()
          }, 0)
        }
      },
      lastYearCount:{
         handler(val) {
          window.setTimeout(() => {
            this.mycertificateHonorType()
          }, 0)
        }
      },
      thisYearCount:{
         handler(val) {
          window.setTimeout(() => {
            this.mycertificateHonorType()
          }, 0)
        }
      },
      special:{
      handler(val) {
          window.setTimeout(() => {
            this.initCostEx()
          }, 0)
        }
      },
      //  特级数量
      first:{
      handler(val) {
          window.setTimeout(() => {
            this.initCostEx()
          }, 0)
        }
      },
        //  壹级数量
      second:{
      handler(val) {
          window.setTimeout(() => {
            this.initCostEx()
          }, 0)
        }
      },
        //  贰级数量
      third:{
      handler(val) {
          window.setTimeout(() => {
            this.initCostEx()
          }, 0)
        }
      },
        //  叁级数量
      noClass:{
      handler(val) {
          window.setTimeout(() => {
            this.initCostEx()
          }, 0)
        }
      },
        //  不分等级数量
      nationalLevel:{
      handler(val) {
          window.setTimeout(() => {
            this.drawPieCharts()
          }, 0)
        }
      },
      // 国家级证书数量
      otherLevel:{
      handler(val) {
          window.setTimeout(() => {
            this.drawPieCharts()
          }, 0)
        }
      },
      // 其他级别证书数量
      municipalLevel:{
      handler(val) {
          window.setTimeout(() => {
            this.drawPieCharts()
          }, 0)
        }
      },
      // 市级证书数量
      provincialLevel:{
      handler(val) {
          window.setTimeout(() => {
            this.drawPieCharts()
          }, 0)
        }
      },
    },
    mounted (){
       this.$nextTick(() => {
        this.drawPieCharts()
        this.myStatep();
        this.myStatei();
        this.myStateo();
        this.myStaten();
        // this.offsetHeight();
        // this.offsetHeightCode();
        this.mycertificateHonorType()
        this.clickChart()
        this.initCostEx()
        this.clickChartEx()
        // this.tableHeight = window.innerHeight - this.a - this.b - 70;
      })
    },
    methods: {
      clickWaringG(){
      this.waringG = 1
      this.a = this.$refs.myWarning.offsetHeight
      this.b = this.$refs.myKinds.offsetHeight
      this.tableHeight = window.innerHeight - this.a - this.b - 70;
      if(this.waringG == 1){
        this.validityType = 2
        this.waringH = 4
        this.months = 3
        this.buttonKindC = 1
        this.buttonKindA = 1
        this.buttonKindB = 1
        this.getDataList()
      }
      },
      clickWaringH(){
      this.waringH = 1
      if(this.waringH == 1){
        this.validityType = 2
        this.waringG = 4
        this.months = 3
        this.buttonKindC = 1
        this.buttonKindA = 1
        this.buttonKindB = 1
        // this.getDataListType()
        this.getDataListEs()
      }
      },
      clickTs(){
      this.EditHonor = true
      },
      // 荣誉证书
      mycertificateHonorType(){
      this.chart = echarts.init(this.$refs.mycertificateHonorTypets);
      // this.chart.resize()
      this.chart.setOption({
      title: {
        // text: '(万元)',
        // color:'#fff'
        // subtext: '(万元)',
     },
     grid: {
        top: '8%',
        bottom: '7%',

        // right: '7%'
        },
        xAxis: {
        type: 'category',
        data: ['2017年', '2018年', '2019年', '2020年'],
         axisLine: {  //这是x轴文字颜色
            show: false,
            lineStyle: {
                color: "#fff",
            }
            },
        axisTick: {
        show: false
        },
       },
       yAxis: {
           type: 'value',
            axisLine: {  //这是x轴文字颜色
                show: false,
                lineStyle: {
                    color: "#fff",
                }
            },
        axisTick: {
        show: false
        },
          splitLine:{
          show:true,
          lineStyle:{
          color: ['#315070'],
          width: 1,
          type: 'solid'
          }
      }
       },
      //  color:['#2CD4FF'],
      color:new echarts.graphic.LinearGradient(0, 0.4, 0.7, 1, [{
                    offset: 0,
                    color: '#2CD4FF'
                }, 
                {
                    offset: 1,
                    color: 'rgba( 44, 212, 255, 0)'
                }
                ]),
       series: [{
           data: [this.lastThreeYearCount, this.lastTwoYearCount, this.lastYearCount, this.thisYearCount],
           barWidth : 25,//柱图宽度
           barGap:37,
           itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                           textStyle: {	    //数值样式
                               color: '#fff',
                               fontSize: 14
                           }
                       }
                   }
               },
           type: 'bar'
       }]
      })
      },
      clickChart() {
      this.chart.on('click',(s)=>{
      this.EditHonor = false
      this.l = this.$refs.myrong.offsetHeight
      this.tableHeightCode = window.innerHeight - this.l - 80;
      if(s.name == "2017年"){
      this.getDatayearlist(2017)
      }
      if(s.name == "2018年"){
      this.getDatayearlist(2018)
      }
      if(s.name == "2019年"){
      this.getDatayearlist(2019)
      }
      if(s.name == "2020年"){
      this.getDatayearlist(2020)
      }
       })
      },
      clickQualiCertiCount(){
      this.$router.push({name:'enterprise-qualification-certificate'})
      },
      clickIsoCertiCount(){
      this.$router.push({name:'enterprise-iso-certificate'})
      },
      clickHonorCertiCount(){
      this.$router.push({name:'enterprise-honor-certificate'})
      },
      clickOtherCertiCount(){
      this.$router.push({name:'enterprise-rest-certificate'})
      },
      
      getDatayearlist(year){
      this.$http({
          url: this.$http.adornUrl('/cert/entHonor/yearlist/' + year),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log(data);
            this.yearList = data.data
          }
        })
      },
      getDataHonorList(){
      this.$http({
          url: this.$http.adornUrl('/cert/entHonor/yearCount'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            // 2018年前获取荣誉证书数量
            this.lastTwoYearCount = data.lastTwoYearCount
            // 2019年前获取荣誉证书数量
            this.lastYearCount = data.lastYearCount
            // 2020今年获取荣誉证书数量
            this.thisYearCount = data.thisYearCount
            // 2017年前获取荣誉证书数量
            this.lastThreeYearCount = data.lastThreeYearCount
          } else {
          }
        })
      },
      // 资质
      myStatep(){
      this.chart = echarts.init(this.$refs.myStatep);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.qualiCertiPercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"42%",
			        textStyle: {
	                    fontSize: '16',
	                    color:'#FFFFFF',
	                    fontWeight: '500'
	                }
		       },
            grid: {
              right: '20%',
              left: '20%',
            },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series: 
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
                center: ['50%', '50%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.qualiCertiPercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.qualiCertiPercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // iso
      myStatei(){
      this.chart = echarts.init(this.$refs.myStatei);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.isoCertiPercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"42%",
			        textStyle: {
	                    fontSize: '16',
	                    color:'#FFFFFF',
	                    fontWeight: '500'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series: 
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.isoCertiPercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.isoCertiPercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 荣誉证书数量占比
      myStateo(){
      this.chart = echarts.init(this.$refs.myStateo);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.honorCertiPercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"42%",
			        textStyle: {
	                    fontSize: '16',
	                    color:'#FFFFFF',
	                    fontWeight: '500'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series: 
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.honorCertiPercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.honorCertiPercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 其他
      myStaten(){
      this.chart = echarts.init(this.$refs.myStaten);
      this.chart.setOption({
        title:{
			        show:true,
			        text:this.otherCertiPercent+'%',
			        // x:'center',
		        	// y:'center',
              left:"center",
              top:"42%",
			        textStyle: {
	                    fontSize: '16',
	                    color:'#FFFFFF',
	                    fontWeight: '500'
	                }
		       },
		    tooltip: {
		        trigger: 'item',
		        formatter: "{d}%",
		        show:false
		    },
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        show:false
		    },
		    series: 
		        {
		            name:'',
		            type:'pie',
		            radius: ['65%', '85%'],
		            avoidLabelOverlap: true,
		            hoverAnimation:false,
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: false
		                }
		            },
		            labelLine: {
		                normal: {
		                    show: false
		                }
		            },
		            data:[
		                {value:this.otherCertiPercent,
                    name:'占比',
                    itemStyle: {
                     color: "#41D9E7",
                    },
                    },
		                {
                    value:100-this.otherCertiPercent,
                    name:'',
                    itemStyle: {
                     color: "#154464",
                    },
                    }
		            ]
		        }
      })
      },
      // 资质项等级数量tu
      initCostEx(){
      this.chartCost = echarts.init(this.$refs.myCost);
      this.chartCost.setOption({
        title: {
        // text: '(万元)',
        // color:'#fff'
      },
     grid: {
        top: '12%',
        bottom: '6%',
        left: '7%'
        },
        xAxis: {
        type: 'category',
        data: ['特级', '一级', '二级', '三级', '不分等级'],
         axisLine: {  //这是x轴文字颜色
            show: false,
                lineStyle: {
                    color: "#fff",
                }
            },
        axisTick: {
        show: false
        },
       },
       yAxis: {
           type: 'value',
            axisLine: {  //这是x轴文字颜色
            show: false,
              lineStyle: {
                    color: "#fff",
                }
            },
        axisTick: {
        show: false
        },
      splitLine:{
          show:true,
          lineStyle:{
          color: ['#315070'],
          width: 1,
          type: 'solid'
          }
      }
       },
       color:new echarts.graphic.LinearGradient(0, 0.4, 0.7, 1, [{
                    offset: 0,
                    color: '#28B1FF'
                }, {
                    offset: 1,
                    color: 'rgba( 40, 177, 255, 0)'
                }]),
       series: [{
           data: [this.special, this.first, this.second, this.third, this.noClass],
           barWidth : 25,//柱图宽度
           itemStyle: {
                   normal: {
                       label: {
                           show: true,		//开启显示
                           position: 'top',	//在上方显示
                           textStyle: {	    //数值样式
                               color: '#fff',
                               fontSize: 14
                           }
                       }
                   }
               },
           type: 'bar'
       }]
      })
      },
      clickChartEx() {
      this.chartCost.on('click',(s)=>{
      this.EditLevel = false
      this.v = this.$refs.leibie.offsetHeight
      this.tableHeightCodese = window.innerHeight - this.v - 100;
      if(s.name == "特级"){
      this.getQualiByLevel(0)
      }
      if(s.name == "一级"){
      this.getQualiByLevel(1)
      }
      if(s.name == "二级"){
      this.getQualiByLevel(2)
      }
      if(s.name == "三级"){
      this.getQualiByLevel(3)
      }
      if(s.name == "不分等级"){
      this.getQualiByLevel(4)
      }
      })
      },
      clickTsLecel(){
      this.EditLevel = true
      },
      getQualiByLevel(level){
      this.$http({
          url: this.$http.adornUrl('/cert/entQuali/qualiByLevel/' + level),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.levelList = data.qualifications
          }
        })
      },
      // 获取各类企业证书到期预警数量
      getAllTypeWarningGet(){
      this.$http({
          url: this.$http.adornUrl('/cert/entOther/allTypeWarningGet'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
          this.qualiWarning = data.qualiWarning
          this.isoWarning = data.isoWarning
          } else {
          }
        })
      },
      // 资质项等级数量获取
      getQualiLevelsCount(){
      this.$http({
          url: this.$http.adornUrl('/cert/entQuali/qualiLevelsCount'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
           this.special = data.special
          //  特级数量
           this.first	= data.first
          //  壹级数量
           this.second = data.second
          //  贰级数量
           this.third	= data.third
          //  叁级数量
           this.noClass = data.noClass
          //  不分等级数量
          } else {
          }
        })
      },
      // 环形tututu
      drawPieCharts() {
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: '{b} : {c} ({d}%)',
          textStyle: mytextStyle
        };
        this.chartPie = echarts.init(document.getElementById('chartPieHoner'),'macarons');
        this.chartPie.setOption({
          title: {
            text: '证书总数',
            subtext: this.totalCounted,
            x: 'center',
            y: '40%',
            textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              // fontFamily: 'Arial, Verdana, sans...',
              fontSize: 15,
              fontStyle: 'normal',
              fontWeight: 'normal',
              color:'#C0C4CC'
            },
            subtextStyle: {//副标题文本样式{"color": "#aaa"}
              // fontFamily: 'Arial, Verdana, sans...',
              fontSize: 40,
              fontStyle: 'normal',
              fontWeight: 'normal',
              "color":'#ffffff'
              // color
            },
          },
          label: {
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: [
              {value:this.nationalLevel, name: '国家'},
              {value:this.provincialLevel, name: '省级'},
              {value:this.municipalLevel, name: '市级'},
              {value:this.otherLevel, name: '其他'},
            ],
            icon: "circle",   //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
　　        itemWidth: 10,  // 设置宽度
　　        itemHeight: 10, // 设置高度
　　        itemGap: 40, // 设置间距
            color:['#fff'],
            left:"center",
            top:"bottom",   
            color:'#fff',
            orient:"horizontal",   
            textStyle:{
            color:'#ffffff',
          }                     
          },
          color:['#3EBDFF','#16E7FD','#3E90FF','#376DF1'],
          series: [
            {
              name: '证书统计',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              data: [
              {value:this.nationalLevel, name: '国家'},
              {value:this.provincialLevel, name: '省级'},
              {value:this.municipalLevel, name: '市级'},
              {value:this.otherLevel, name: '其他'},
              ],
              itemStyle:{
                normal:{
                  label:{
                    textStyle:{

                    }
                  }
                }
              },
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {
                 textStyle: {	    //数值样式
                    //  color: '#fff',
                  fontSize: 14,
                  color:'#ffffff',
                },
              normal: {
              show: true,
              formatter: '{b} : {c}',
              textStyle: {
                   color: '#ffffff'  // 改变标示文字的颜色
                   },
              }
              }
            },
          ]
        });
      },
      getlevelCount(){
      this.$http({
          url: this.$http.adornUrl('/cert/entHonor/levelCount'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
          this.nationalLevel = data.nationalLevel
          // 国家级证书数量
          this.otherLevel	= data.otherLevel
          // 其他级别证书数量
          this.municipalLevel	= data.municipalLevel
          // 市级证书数量
          this.provincialLevel = data.provincialLevel
          // 省级证书数量
          this.totalCounted = data.nationalLevel+data.otherLevel+data.municipalLevel+data.provincialLevel
          } else {
          }
        })
      },
      init () {
        if (this.updateCount === 0) {
          this.$http({
            url: this.$http.adornUrl('/tenant/tenantInfo/check'),
            method: 'get',
            params: this.$http.adornParams({})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.infoflag = data.isOk
              this.updateCount = 1
              if (!data.isOk) {
                this.$router.push({name: 'complete'})
              }
            } else {
              this.dataList = []
            }
            this.dataListLoading = false
          })
        }
      },
      clickThrees(){
        this.validityType = 0
        this.months = 3
        this.buttonKindA = 1
        this.buttonKindB = 1
        this.buttonKindC = 2
        this.buttonKindQ = 1
        if(this.waringG == 1){
        this.getDataList()
        }
        if(this.waringH == 1){
        this.getDataListEs()
        }
      // }
      },
      clickQuansss(){
      this.validityType = 2
        this.months = 3
        this.buttonKindA = 1
        this.buttonKindB = 1
        this.buttonKindC = 1
        this.buttonKindQ = 2
        if(this.waringG == 1){
        this.getDataList()
        }
        if(this.waringH == 1){
        this.getDataListEs()
        }
      },
      clickOnes(){
      this.validityType = 0
      this.months = 1
        this.buttonKindA = 1
        this.buttonKindB = 2
        this.buttonKindC = 1
        this.buttonKindQ = 1
        if(this.waringG == 1){
        this.getDataList()
        }
        if(this.waringH == 1){
        this.getDataListEs()
        }
      // }
      },
      clickExpires(){
      this.validityType = -1
        this.buttonKindA = 2
        this.buttonKindB = 1
        this.buttonKindC = 1
        this.buttonKindQ = 1
        if(this.waringG == 1){
        this.getDataList()
        }
        if(this.waringH == 1){
        this.getDataListEs()
        }
      // }
      },
      // 获取资质到期
        getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/cert/entQuali/paging'),
          method: 'post',
          data: this.$http.adornData({
            'validityType':this.validityType,
            'months':this.months,
            'pageNum': 1,
            'pageSize': 300,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataEntQualiList = data.data.records
          } else {
            this.dataEntQualiList = []
          }
          this.dataListLoading = false
        })
      },
      getDataListEs(){
      this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/cert/entIso/paging'),
          method: 'post',
          data: this.$http.adornData({
            'validityType':this.validityType,
            'months':this.months,
            'pageNum': 1,
            'pageSize': 300,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataEntQualiList = data.data.records
          } else {
            this.dataEntQualiList = []
          }
          this.dataListLoading = false
        })
      },
      // 获取证书种类数据
      // 状态到期预警 1-3
      getDataListType () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'validityType':this.validityType,
            'type':this.typeA,
            'months':this.months
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.tableData = data.page.list
            // this.totalPage = data.page.totalCount
          }
        })
      },
      gotoEmployee () {
        // this.showNotice()
        if (this.infoflag) {
          this.$router.push({name: 'company-employee'})
        }
      },
      getCountByAllValidityType(){
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getCertificateTypeCollect'),
          method: 'get'
        }).then(({data}) =>{
          // console.log(data)
          this.expired = data.partTimeCount
          this.notExpired = data.selfCount
          this.threeMonths = data.friendCount
          this.totalCount = data.totalCount
        })
      },
      // 企业证书第一个图
      getCountBycertiTypeCount(){
        this.$http({
          url: this.$http.adornUrl('/cert/entOther/certiTypeCount'),
          method: 'get'
        }).then(({data}) =>{
          if(data.code == 0){
            this.honorCertiCount = data.honorCertiCount
            this.honorCertiPercent = parseFloat((data.honorCertiPercent*100).toFixed(10))
            this.isoCertiCount = data.isoCertiCount
            this.isoCertiPercent = parseFloat((data.isoCertiPercent*100).toFixed(10))
            this.otherCertiCount = data.otherCertiCount
            this.otherCertiPercent = parseFloat((data.otherCertiPercent*100).toFixed(10))
            this.qualiCertiCount = data.qualiCertiCount
            this.qualiCertiPercent = parseFloat((data.qualiCertiPercent*100).toFixed(10))
          }
        })
      },
    
      // heng
      getCountByStatistics(){
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getFeeStatistics'),
          method: 'get'
        }).then(({data}) =>{
          // console.log(data)
          this.borrowInPay = data.borrowInPay
          this.borrowOutIncome = data.borrowOutIncome
          this.friendFee = data.friendFee
          this.selfFee = data.selfFee
  
        })
      },
      gotoCertificateinfoRenewal () {
        // this.showNotice()
        if (this.infoflag) {
          this.$router.push({name: 'certificate-certificateinforenewal'})
        }
      },

      gotoCertificateinfoAdd () {
        this.$router.push({name: 'certificate-certificateinfoadd'})
      },
      gotoDeptInfo () {
        // this.showNotice()
        if (this.infoflag) {
          this.$router.push({name: 'company-deptInfo'})
        }
      },
      // 资讯列表
      getPolicyList(){
           this.$http({
              url: this.$http.adornUrl(`/sys/policy/list`),
              method: 'get',
              params: this.$http.adornParams({
               'visible':this.radio,
               'page':this.pageIndex,
               'limit':this.pageSize
              })
            }).then(({data}) => {
              if (data.code === 0) {
              this.PolicyList = data.page.list
              console.log(this.PolicyList)
              // this.totalCount = data.page.totalCount
              } else {
                this.$message.error(data.msg)
              }
            })
      },
    }
  }
</script>

<style lang="scss" scoped>
/deep/.demo-header{
  width: 100%;
  height: 5vh;
  background: url(~@/assets/img/toubu.png);
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .div-buttona{
    width: 150px;
    height: 5vh;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background:  url(~@/assets/img/toubuanniu.png);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button--text{
    color:#ffffff;
    font-size: 16px;
    }
  }
  .div-buttonb{
    width: 150px;
    height: 5vh;
    font-size: 16px;
    color: #ffffff;
    opacity: 0.65;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button--text{
    color:#ffffff;
    font-size: 16px;
    }
  }
}
.warning{
  // margin-top: 4px;
  width: 38%;
  float: left;
  margin-left: 2%;
  background: url(~@/assets/img/yuanpan.png) no-repeat;
  background-size:100% 70%;
  background-position:bottom left;
  // margin-left: 6px;
  height: 48.5vh;
  position: relative;
}
@keyframes move-a {
  5%{
  // .waring-a{
  width: 24%;
  height: 34.5%;
  text-align: center;
  position:absolute;
  left: 39%;
  top: 33%;
  font-size: 18px;
  font-weight: 400;
  color: #3AFBFF;
   .waring-is{
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     background-image: url(../../assets/img/xiaoyuanyuan.png);
     background-size: 100% 100%;
     margin-bottom: 5px;
   }
  //  }
  }
  10%{
    // .waring-a{
    width: 24%;
    height: 34.5%;
    text-align: center;
    position:absolute;
    left: 39%;
    top: 33%;
    font-size: 18px;
    font-weight: 400;
    color: #3AFBFF;
    .waring-is{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: url(../../assets/img/xiaoyuanyuan.png);
      background-size: 100% 100%;
      margin-bottom: 5px;
    }
    // }
  }
  20%{
    // .waring-a{
    width: 24%;
    height: 34.5%;
    text-align: center;
    position:absolute;
    left: 39%;
    top: 33%;
    font-size: 18px;
    font-weight: 400;
    color: #3AFBFF;
    .waring-is{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: url(../../assets/img/xiaoyuanyuan.png);
      background-size: 100% 100%;
      margin-bottom: 5px;
    }
    // }
    }
  30%{
    // .waring-a{
    width: 24%;
    height: 34.5%;
    text-align: center;
    position:absolute;
    left: 39%;
    top: 33%;
    font-size: 18px;
    font-weight: 400;
    color: #3AFBFF;
    .waring-is{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: url(../../assets/img/xiaoyuanyuan.png);
      background-size: 100% 100%;
      margin-bottom: 5px;
    }
    // }
  }
  40%{
    // .waring-a{
    width: 24%;
    height: 34.5%;
    text-align: center;
    position:absolute;
    left: 39%;
    top: 33%;
    font-size: 18px;
    font-weight: 400;
    color: #3AFBFF;
    .waring-is{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: url(../../assets/img/xiaoyuanyuan.png);
      background-size: 100% 100%;
      margin-bottom: 5px;
    }
    // }
  }
  // 50%{
  //   width: 10%;
  //   height: 16%;
  //   left: 50%;
  //   top: 0%;
  //   font-size: 9px;
  //   font-weight: 700;
  // }
  // 60%{
  //   width: 13%;
  //   height: 22%;
  //   left: 28%;
  //   top: 5%;
  //   font-size: 12px;
  //   font-weight: 700;
  // }
  // 70%{
  //   width: 16.5%;
  //   height: 27.5%;
  //   left: 20%;
  //   top: 15%;
  //   font-size: 12px;
  //   font-weight: 700;
  // }
  // 80%{
  //   width: 20%;
  //   height: 33%;
  //   left: 12%;
  //   top: 30%;
  //   font-size: 15px;
  // }
  // 90%{
  //   width: 22.5%;
  //   height: 38%;
  //   left: 33%;
  //   top: 30%;
  //   font-size: 18px;
  //   font-weight: 700;
  // }
  // 100%{
  //   width: 25%;
  //   height: 43%;
  //   left: 38%;
  //   top: 40%;
  // }
}
@keyframes move-b {
  10%{
    width: 16.5%;
    height: 27.5%;
    left: 80%;
    top: 15%;
    font-size: 12px;
    font-weight: 700;
  }
  20%{
    width: 13%;
    height: 22%;
    left: 62%;
    top: 5%;
    font-size: 12px;
    font-weight: 700;
  }
  30%{
    width: 10%;
    height: 16%;
    left: 50%;
    top: 0%;
    font-size: 9px;
    font-weight: 700;
  }
  40%{
    width: 13%;
    height: 22%;
    left: 28%;
    top: 5%;
    font-size: 12px;
    font-weight: 700;
  }
  50%{
    width: 16.5%;
    height: 27.5%;
    left: 20%;
    top: 15%;
    font-size: 12px;
    font-weight: 700;
  }
  60%{
    width: 20%;
    height: 33%;
    left: 12%;
    top: 30%;
    font-size: 15px;
  }
  70%{
    width: 22.5%;
    height: 38%;
    left: 37%;
    top: 35%;
    font-size: 18px;
    font-weight: 700;
  }
  80%{
    width: 25%;
    height: 43%;
    left: 38%;
    top: 40%;
  }
  90%{
    width: 22.5%;
    height: 38%;
    left: 63%;
    top: 35%;
    font-size: 18px;
    font-weight: 700;
  }
  100%{
    width: 20%;
    height: 33%;
    left: 70%;
    top: 30%;
    font-size: 15px;
    }
}
@keyframes move-d {

  10%{
    width: 16.5%;
    height: 27.5%;
    left: 20%;
    top: 15%;
    font-size: 12px;
    font-weight: 700;
  }
  20%{
    width: 20%;
    height: 33%;
    left: 12%;
    top: 30%;
    font-size: 15px;
  }
  30%{
    width: 22.5%;
    height: 38%;
    left: 37%;
    top: 35%;
    font-size: 18px;
    font-weight: 700;
  }
  40%{
    width: 25%;
    height: 43%;
    left: 38%;
    top: 40%;
  }
  50%{
    width: 22.5%;
    height: 38%;
    left: 63%;
    top: 35%;
    font-size: 18px;
    font-weight: 700;
  }
  60%{
    width: 20%;
    height: 33%;
    left: 70%;
    top: 30%;
    font-size: 15px;
    }
  70%{
    width: 16.5%;
    height: 27.5%;
    left: 80%;
    top: 15%;
    font-size: 12px;
    font-weight: 700;
  }
  80%{
    width: 13%;
    height: 22%;
    left: 62%;
    top: 5%;
    font-size: 12px;
    font-weight: 700;
  }
  90%{
    width: 10%;
    height: 16%;
    left: 50%;
    top: 0%;
    font-size: 9px;
    font-weight: 700;
  }
  100%{
    width: 13%;
    height: 22%;
    left: 28%;
    top: 5%;
    font-size: 12px;
    font-weight: 700;
  }
}
@keyframes move-e {
  10%{
    width: 22.5%;
    height: 38%;
    left: 37%;
    top: 35%;
    font-size: 18px;
    font-weight: 700;
  }
  20%{
    width: 25%;
    height: 43%;
    left: 38%;
    top: 40%;
  }
  30%{
    width: 22.5%;
    height: 38%;
    left: 63%;
    top: 35%;
    font-size: 18px;
    font-weight: 700;
  }
  40%{
    width: 20%;
    height: 33%;
    left: 70%;
    top: 30%;
    font-size: 15px;
    }
  50%{
    width: 16.5%;
    height: 27.5%;
    left: 80%;
    top: 15%;
    font-size: 12px;
    font-weight: 700;
  }
  60%{
    width: 13%;
    height: 22%;
    left: 62%;
    top: 5%;
    font-size: 12px;
    font-weight: 700;
  }
  70%{
    width: 10%;
    height: 16%;
    left: 50%;
    top: 0%;
    font-size: 9px;
    font-weight: 700;
  }
  80%{
    width: 13%;
    height: 22%;
    left: 28%;
    top: 5%;
    font-size: 12px;
    font-weight: 700;
  }
  90%{
    width: 16.5%;
    height: 27.5%;
    left: 20%;
    top: 15%;
    font-size: 12px;
    font-weight: 700;
  }
  100%{
    width: 20%;
    height: 33%;
    left: 12%;
    top: 30%;
    font-size: 15px;
  }
}
.waring-a{
  width: 24%;
  height: 34.5%;
  text-align: center;
  position:absolute;
  left: 39%;
  top: 33%;
  font-size: 18px;
  font-weight: 400;
  color: #FFE552;
  // animation: move-a 20s linear infinite;
  .waring-is{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: url(~@/assets/img/dayuanyuan.png);
  background-size: 100% 100%;
  // margin-bottom: 5px;
  }
}
.kind-wtf{
  height: 4.1vh;
}
// .xiazuan-s{
//   // margin-top: 4.1vh;
// }
.xiazuan-div{
  height: 47vh;
  width: 100%;
}
.waring-b{
  width: 15%;
  height: 22%;
  float: left;
  position:absolute;
  left: 90%;
  top: 20%;
  font-size: 15px;
  // animation: move-b 20s linear infinite;
  font-weight: 400;
  color: #3AFBFF;
  text-align: center;
  .waring-is{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(~@/assets/img/xiaoyuanyuan.png);
  background-size: 100% 100%;
  margin-bottom: 4px;
  }
}
.waring-d{
  width: 9%;
  height: 13%;
  position:absolute;
  left:46.5%;
  top: 10%;
  font-size: 8px;
  font-weight: 500;
  color: #3AFBFF;
  // animation: move-d 20s linear infinite;
  text-align: center;
  span{
    font-size: 8px !important;
  }
  .waring-is{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(~@/assets/img/xiaoyuanyuan.png);
  background-size: 100% 100%;
  margin-bottom: 3px;
  h2{
    font-size: 8px !important;
  }
  }

}
.waring-e{
  width: 15%;
  height: 22%;
  position:absolute;
  left: -5%;
  top: 20%;
  // animation: move-e 20s linear infinite;
  text-align: center;
	font-size: 15px;
  font-weight: 400;
  color: #3AFBFF;
  .waring-is{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(~@/assets/img/xiaoyuanyuan.png);
  background-size: 100% 100%;
  margin-bottom: 4px;
  }
}
.pie-wrap{
  width:100%;
  height:41.5vh;
    }
.cost-es{
  width: 100%;
  height: 41vh;
}
.certificateState-es{
  width: 100%;
  height: 41vh;
.state-a{
  width: 50%;
  height: 50%;
  float: left;
  text-align: center;
  .state-as{
    width: 90%;
    height: 90%;
  }
  .state-bs{
    width: 90%;
    height: 90%;
  }
  .state-cs{
    width: 90%;
    height: 90%;
  }
  .state-ds{
    width: 90%;
    height: 90%;
  }
  .state-es{
    width: 90%;
    height: 90%;
  }
  .state-fs{
    width: 90%;
    height: 90%;
  }
}
}
.enterpriseState-es{
  width: 100%;
  height: 42vh;
 .state-a{
  width: 50%;
  height: 40%;
  float: left;
  text-align: center;
  margin-top: 5%;
  // margin:auto;
  // display: flex;
  // justify-content: center;
  .state-as{
    width: 70%;
    height: 70%;
  // text-align: center;
  }
  .sta-zi{
    width: 70%;
    height: 20%;
  }
  .state-bs{
    width: 70%;
    height: 70%;
  // text-align: center;
  }
  .state-cs{
    width: 70%;
    height: 70%;
  // text-align: center;
  }
  .state-ds{
    width: 70%;
    height: 70%;
  // text-align: center;
  }
}
}
.kongxian{
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 5px;
}
/deep/.certificateHonorType-es{
  width: 100%;
  height: 43vh;
  // transform: (translateX(-9%));
  .el-table__body-wrapper::-webkit-scrollbar{
     /*width: 0;宽度为0隐藏*/
    width: 0px !important;
  }
}
 .demo-top{
   width: 100%;
  //  margin-top: 6px;
 }
.certificateType{
  float: left;
  margin-left: 20px;
  background-size: 100% 100%;
  width: 25%;
  height: 47vh;
}
.certificateHonorType{
  // margin-top: 4px;
  width: 28%;
  float: right;
  margin-right: 10px;
  background-size: 100% 100%;
  height: 48.5vh;
}
.select-kind{
  // /deep/ .el-button:focus, .el-button:hover{
  //   color:#3EBDFF;
  // }
  // position:absolute;
  // bottom: 0;
  // right: 0;
  width: 70%;
  height: 4vh;
  float: right;
  background-color:transparent;
  .buttonKind-a{
    float: right;
    height: 4vh;
    margin-left: 8px;
    font-weight: 700;
    margin-right: 20px;
    color: #40CDF1;
  }
  .buttonKind-a:hover{
  color: #ffffff;
  }
  .buttonKind-active{
    float: right;
    height: 4vh;
    margin-left: 8px;
    font-weight: 700;
    margin-right: 20px;
    // color: #909399;
    color: #ffffff;
  }
  .buttonKind-q{
    height: 4vh;
    float: right;
    color: #40CDF1;
    font-weight: 700;
  }
  .buttonKind-q:hover{
  color: #ffffff;
  }
  .buttonKind-qctive{
    height: 4vh;

  float: right;
  // color: #909399;
  font-weight: 700;
  color: #ffffff;
  }
  .buttonKind-b{
    float: right;
    height: 4vh;
    color: #40CDF1;
    font-weight: 700;
  }
  .buttonKind-b:hover{
  color: #ffffff;
  }
  .buttonKind-bctive{
    float: right;
    height: 4vh;
    // color: #909399;
    font-weight: 700;
  color:#ffffff;
  }
  .buttonKind-c{
    float: right;
    height: 4vh;
    color: #40CDF1;
    font-weight: 700;
  }
  .buttonKind-c:hover{
  color: #ffffff;
  }
  .buttonKind-cctive{
  float: right;
  height: 4vh;
  // color: #909399;
  font-weight: 700;
  color: #ffffff;
  }
}
.kind{
  height: 4vh;
  width: 100%;
  display: flex;
  // justify-content:center;
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0) 100%);
  align-items:center;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  .biaoshi{
    width: 5px;
    height: 4vh;
    margin-right: 10px;
    background-color: #41D9E7;
  }
}
.kind-zhong{
  float: left;
  height: 4vh;
  width: 50%;
  display: flex;
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0) 100%);
  // justify-content:center;
  align-items:center;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  .biaoshi{
    width: 5px;
    height: 4vh;
    margin-right: 10px;
    background-color: #41D9E7;
  }
}
.return-es{
width: 30%;
height: 4.5vh;
float: right;
font-size: 14px;
}
.kind-e{
  position:relative;
  height: 4vh;
  background: linear-gradient(90deg, rgba(0, 123, 255, 0.2) 0%, rgba(0, 123, 255, 0) 100%);
  width: 100%;
}
// .select-kind{
//   width: 85px;
//   // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
//   /deep/ input::-webkit-input-placeholder {
//     color: #fff;
//   }
//   /deep/  input::-moz-input-placeholder {
//     color: #fff;
//   }
//   /deep/  input::-ms-input-placeholder {
//     color: #fff;
//   }
//   //修改的是el-input的样式 
//   //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
//   //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
//   /deep/ .el-select,
//   /deep/ .el-input,
//   /deep/ .el-input__inner{
//     background-color:transparent ;
//     color:#3EBDFF;
//     border:0px;
//     border-radius:0px;
//     text-align: center;
//   }
//   /deep/ .el-scrollbar{
//     background-color: transparent;
//   }
//   //el-input聚焦的时候 外层的border会有一个样式
//   /deep/ .el-select .el-input.is-focus .el-input__inner{
//     border:0px;
//   }

//   //修改的是el-input上下的小图标的颜色
//   /deep/ .el-select .el-input .el-select__caret{
//     color:#fff;
//   }

//   //修改总体选项的样式 最外层
//   /deep/ .el-select-dropdown{
//     background-color: #08164d;
//     margin: 0px;
//     border:0px;
//     border-radius: 0px;
//   }

//   //修改单个的选项的样式
//   /deep/ .el-select-dropdown__item{
//     background-color: transparent;
//     color:#fff;
//   }

//   //item选项的hover样式
//   /deep/ .el-select-dropdown__item.hover, 
//   /deep/ .el-select-dropdown__item:hover{
//     color:#409eff;
//   }

//   //修改的是下拉框选项内容上方的尖角
//   /deep/ .el-popper .popper__arrow, .el-popper .popper__arrow::after{
//     display: none;
//   }
// }
/deep/.certificateWarning-tab{
  width: 100%;
  height: 41vh;
  .el-table__body-wrapper::-webkit-scrollbar{
     /*width: 0;宽度为0隐藏*/
    width: 0px !important;
  }
}
.certificateWarning-tab /deep/ .el-table{
    color: #F7F7F7;
    border-spacing: 0px !important;
    border-bottom: 0px !important;
}
.certificateWarning-tab /deep/{
.has-gutter{
    border-spacing: 0px !important;
}
}
/deep/.certificateWarning-tab {
.el-table__row--striped{
  background: rgba(67, 203, 225, 1) !important;
  // opacity: 0.5;
}
}
.certificateWarning-tab /deep/ .table{
  border-spacing: 0px !important;
}
.certificateWarning-tab /deep/ .gutter{
  width: 0px!important;
  background-color: transparent!important;
}
.certificateWarning-tab /deep/ .el-table__header-wrapper{
  background-color: transparent;
  color: #40CDF1;
}
.certificateWarning-tab /deep/  .el-table, .el-table__expanded-cell {
    background-color: transparent;
}

.certificateWarning-tab /deep/ .el-table tr {
    background-color: transparent!important;
    // color:#40CDF1 !important;
}
.certificateWarning-tab /deep/ .el-table tr th{
    background-color: transparent!important;
    color:#40CDF1 !important;
}
.certificateWarning-tab /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
   background-color: transparent;
}
.certificateWarning-tab /deep/ .el-table td, .el-table th.is-leaf{
  border: none;
}
.certificateHonorType-es /deep/ .el-table{
    color: #F7F7F7;
    border-spacing: 0px !important;
    border-bottom: 0px !important;
}
.certificateHonorType-es /deep/{
.has-gutter{
    border-spacing: 0px !important;
}
}
.certificateHonorType-es /deep/ .table{
  border-spacing: 0px !important;
}
.certificateHonorType-es /deep/ .gutter{
  width: 0px!important;
  background-color: transparent!important;
}
.certificateHonorType-es /deep/ .el-table__header-wrapper{
  background-color: transparent;
  color: #40CDF1;
}
.certificateHonorType-es /deep/  .el-table, .el-table__expanded-cell {
    background-color: transparent;
}

.certificateHonorType-es /deep/ .el-table tr {
    background-color: transparent!important;
}
.certificateHonorType-es /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
   background-color: transparent;
}
.certificateHonorType-es /deep/ .el-table td, .el-table th.is-leaf{
  border: none;
}


.el-table::before {//去除底部白线
	 left: 0;
	 bottom: 0;
	 width: 100%;
	 height: 0px;
}
.kind-s{
  height: 4vh;
  // width: 100%;
  float: left;
  display: flex;
  width: 30%;
  // background-color: aqua;
  // justify-content:center;
  align-items:center;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  .biaoshi{
    width: 5px;
    height: 4vh;
    margin-right: 10px;
    background-color: #41D9E7;
  }
}
.certificateState{
  margin-top: 2px;
  width: 28%;
  float: right;
  margin-right: 10px;
  background-size: 100% 100%;
  height: 47vh;
}
.enterpriseState{
  // margin-top: 2px;
  margin-left: 15px;
  width: 25%;
  float: left;
  // margin-right: 10px;
  height: 48.5vh;
}
.demo-buttom{
  // margin-top: 4px;
  // height: 47.5vh;
  width: 100%;
}
.cost{
  width: 25%;
  float: left;
  margin-left: 15px;
  background-size: 100% 100%;
  height: 45vh;
}
.certificateWarning{
  width: 41%;
  float: left;
  // margin-top: 5px;
  // margin-left: 1.5%;
  // margin-bottom: 2px;
  // margin-right: 1%;

  background-size: 100% 100%;
  height: 45vh;
}
.statistics{
  width: 28%;
  float: right;
  // margin-top: 4px;
  margin-right: 10px;
  background-size: 100% 100%;
  height: 45vh;
}
  .zhengshutupian{
    width: 100%;
    height: 150px;
    margin-top: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .buttonText{
    color: #53b4ff;
  }
  .tupian{
    width: 100%;
    height: 69px;
    // text-align: center;
    img{
    width: 66px;
    height: 69px;
    // text-align: center;
    }
  }

  .dididi{
    margin-top: 8px;
  }
  .kaishi{
  margin-top: 5px;
  }
  .anniu{
    // width: 100%;
    // margin-bottom: 30px;
    height: 30px;
    // float: right;
  }
  .zhengce{
    margin-bottom: 15px;
  }
  .chart-tive{
    height: 100%;
    padding: 6px;
  }
  .sangeyue{
    float: right;
    // color: #000;
    // :hover{
    // color: #53b4ff;
    // }
  }
  .yidaoqi{
    margin-right: 10px;
    margin-left: 10px;
    float: right;
  }
  .yigeyue{
    // margin-right: 10px;
    float: right;
    // color: #000;
    // :hover{
    // color: #53b4ff;
    // }
  }
  .chart-box {
    // text-align: center;
      padding: 10px;
      height: 180px;
  }
  .chart-boos{
    height: 100%;
  }
  .div-boos{
    height: 100%;
    overflow: hidden !important;
    overflow-y: auto !important;
  }
  .title{
    float: left;
    font-size:18px;
    color:'#333333';
  }
  // .rukutitle{
  //   float: left;
  //   height: 20px;
  //   font-size:18px;
  //   margin-bottom: 1px;
  //   color:'#333333';
  // }
  .delete{
    width:120px;
    height:120px;
    position: relative;
    top: -10px;
    right: -10px;
    float: right;
    z-index: 4;
  }
  .iconzhengshucopy{
    color: #ed6055;
  }
  .iconrenshizonghe{
    color: #39bc8b;
  }
  .icon {
    display: block;
    height: 100px;
    line-height: 100px;
    font-size: 78px;
    text-align: center;
    margin: 10px auto;
    -webkit-transition: font-size 0.25s linear, width 0.25s linear;
    -moz-transition: font-size 0.25s linear, width 0.25s linear;
    transition: font-size 0.25s linear, width 0.25s linear;
  }
  .center-box{
    display: inline-block;
    margin: auto;
    position: relative;
    top: -80px;
    text-align: center;
  }
  .center-yanqi{
    height: 100%;
    // background-color: aqua;
  }
  .tipApan{
    color: #999999;
    font-size:14px;
  }
   .chart-container {
        width: 100%;
        float: left;
    }
    /deep/.el-table td, /deep/.el-table th.is-leaf {
      border: none!important;
    }
    // .div-Bt{
    //   width: 100%;
    //   height: 47.5vh;
    // }
</style>
